<template>
    <div class="page">
        <!-- 头部导航 -->
        <div class="nav-header">
            <van-icon name="arrow-left" size="34" @click="goBack" />
            <div class="title">修改密码</div>
            <div></div>
        </div>

        <div class="change-password-content">
            <!-- 当前密码状态 -->
            <div class="current-password" v-if="hasPassword">
                <div class="section-title">当前密码</div>
                <div class="password-display">
                    <span>{{ displayPassword }}</span>
                    <van-icon name="eye-o" size="40" @click="togglePasswordVisibility" v-if="!showPassword" />
                    <van-icon name="closed-eye" size="40" @click="togglePasswordVisibility" v-else />
                </div>
            </div>

            <!-- 密码修改表单 -->
            <div class="password-form">
                <div class="section-title">{{ hasPassword ? '修改密码' : '设置密码' }}</div>
                
                <div class="form-item" v-if="hasPassword">
                    <div class="item-label">当前密码</div>
                    <van-field
                        v-model="form.currentPassword"
                        placeholder="请输入当前密码"
                        clearable
                        input-align="left"
                        :style="{ fontSize: '28px' }"
                        type="password"
                    />
                </div>
                
                <div class="form-item">
                    <div class="item-label">新密码</div>
                    <van-field
                        v-model="form.newPassword"
                        placeholder="请输入6-16位新密码"
                        clearable
                        input-align="left"
                        :style="{ fontSize: '28px' }"
                        type="password"
                        maxlength="16"
                    />
                </div>
                
                <div class="form-item">
                    <div class="item-label">确认密码</div>
                    <van-field
                        v-model="form.confirmPassword"
                        placeholder="请再次输入新密码"
                        clearable
                        input-align="left"
                        :style="{ fontSize: '28px' }"
                        type="password"
                        maxlength="16"
                    />
                    <div class="error-tips" v-if="passwordMismatch">两次输入的密码不一致</div>
                </div>
                
                <div class="form-tips">
                    <p>* 密码长度为6-16位，建议使用字母、数字和符号的组合</p>
                    <p>* 为保证账号安全，修改密码后需要重新登录</p>
                </div>
            </div>

            <!-- 提交按钮 -->
            <div class="submit-btn">
                <van-button 
                    type="primary" 
                    block 
                    @click="submitChange" 
                    :disabled="!canSubmit"
                    :style="{
                        background: canSubmit ? '#FEE543' : '#FFF6B8',
                        color: '#333',
                        border: 'none'
                    }"
                >{{ hasPassword ? '确认修改' : '确认设置' }}</van-button>
            </div>
        </div>
    </div>
</template>

<script>
import { Icon, Button, Field, Toast } from 'vant';

export default {
    name: 'ChangePasswordPage',
    components: {
        [Icon.name]: Icon,
        [Button.name]: Button,
        [Field.name]: Field
    },
    computed: {
        canSubmit() {
            // 判断是否可以提交
            if (this.hasPassword) {
                return this.form.currentPassword && 
                    this.form.newPassword && 
                    this.form.confirmPassword && 
                    this.form.newPassword === this.form.confirmPassword &&
                    this.form.newPassword.length >= 6;
            } else {
                return this.form.newPassword && 
                    this.form.confirmPassword && 
                    this.form.newPassword === this.form.confirmPassword &&
                    this.form.newPassword.length >= 6;
            }
        },
        passwordMismatch() {
            // 判断两次密码输入是否一致
            return this.form.confirmPassword && 
                this.form.newPassword &&
                this.form.newPassword !== this.form.confirmPassword;
        },
        displayPassword() {
            if (!this.hasPassword) return '';
            
            const password = localStorage.getItem('userPassword');
            if (this.showPassword) {
                return password;
            } else {
                return '•'.repeat(password.length);
            }
        }
    },
    data() {
        return {
            hasPassword: false,
            showPassword: false,
            form: {
                currentPassword: '',
                newPassword: '',
                confirmPassword: ''
            }
        };
    },
    created() {
        // 检查是否已设置密码
        this.hasPassword = localStorage.getItem('userPassword') ? true : false;
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        togglePasswordVisibility() {
            this.showPassword = !this.showPassword;
        },
        submitChange() {
            // 如果已有密码，需要验证当前密码
            if (this.hasPassword) {
                const currentPassword = localStorage.getItem('userPassword');
                if (this.form.currentPassword !== currentPassword) {
                    Toast('当前密码输入错误');
                    return;
                }
            }
            
            // 验证新密码长度
            if (this.form.newPassword.length < 6) {
                Toast('密码长度不能少于6位');
                return;
            }
            
            // 验证两次密码输入是否一致
            if (this.form.newPassword !== this.form.confirmPassword) {
                Toast('两次输入的密码不一致');
                return;
            }
            
            // 保存新密码
            localStorage.setItem('userPassword', this.form.newPassword);
            
            // 提示成功
            Toast({
                message: '密码修改成功',
                icon: 'passed',
                className: 'custom-toast'
            });
            
            // 返回上一页
            setTimeout(() => {
                this.$router.go(-1);
            }, 1000);
        }
    }
}
</script>

<style lang="less" scoped>
.page {
    width: 750px;
    margin: 0 auto;
    background: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 100px;
    font-family: "正楷";
}

.nav-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    width: 750px;
    margin: 0 auto;

    .title {
        font-size: 36px;
        font-weight: 500;
        position: absolute;
        left: 47%;
        transform: translateX(-50%);
    }
}

.change-password-content {
    margin-top: 108px;
    padding: 0 32px;
}

.current-password {
    background-color: #fff;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
    
    .section-title {
        font-size: 30px;
        color: #333;
        margin-bottom: 24px;
    }
    
    .password-display {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 36px;
        font-weight: bold;
        color: #333;
        
        span {
            letter-spacing: 2px;
        }
        
        .van-icon {
            color: #999;
            cursor: pointer;
        }
    }
}

.password-form {
    background-color: #fff;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
    
    .section-title {
        font-size: 30px;
        color: #333;
        margin-bottom: 32px;
    }
    
    .form-item {
        margin-bottom: 40px;

        .item-label {
            font-size: 32px;
            color: #333;
            margin-bottom: 20px;
        }
    }
    
    .form-tips {
        font-size: 24px;
        color: #999;
        line-height: 1.6;
        margin-top: 32px;
    }
}

.submit-btn {
    padding: 0 32px;
    margin-bottom: 40px;

    .van-button {
        height: 88px;
        line-height: 88px;
        font-size: 32px;
        border-radius: 44px;
        box-shadow: 0 6px 12px rgba(255, 200, 0, 0.2);
        
        &:disabled {
            opacity: 1;
        }
    }
}

.error-tips {
    color: #f44;
    font-size: 24px;
    margin-top: 8px;
    padding-left: 10px;
}

// 样式覆盖
:deep(.van-field__control) {
    height: 65px;
    line-height: 65px;
}

:deep(.van-cell) {
    padding: 10px 16px;
    border-radius: 12px;
    background-color: #f8f8f8;
    border: none;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    margin: 6px 0;
}
</style> 